<!-- 分析统计页面 -->
<template>
  <f7-page id="analysis">
    <f7-navbar title="分析统计" back-link></f7-navbar>
    <f7-card>
      <f7-card-header>走访督查</f7-card-header>
      <f7-card-content ref="w">
        <p>年度督查户数：123 户，同比增加 15%</p>
        <p>年度督查村数：25 个，同比增加 8%</p>
        <p>发现问题个数：67 个，同比下降 30%</p>
        <Chart v-model="data1" :size="{ w: w, h: 200 }"></Chart>
      </f7-card-content>
    </f7-card>
    <f7-card>
      <f7-card-header>问题处理</f7-card-header>
      <f7-card-content ref="w">
        <p>发现问题总数：67，已转办问题个数：60</p>
        <p>已处理问题个数：47，待处理问题个数：20</p>
        <Chart v-model="data2" :size="{ w: w, h: 200 }"></Chart>
      </f7-card-content>
    </f7-card>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7Card, f7CardHeader, f7CardContent } from 'framework7-vue'
import Chart from 'components/echart'
export default {
  components: {
    f7Page,
    f7Navbar,
    f7Card,
    f7CardHeader,
    f7CardContent,
    Chart
  },
  data() {
    return {
      w: 1,
      data1: {
        grid: {
          left: '20px',
          right: '0',
          bottom: '20px',
          top: '20px'
        },
        xAxis: {
          type: 'category',
          data: ['总问题', '已转办', '已处理', '待处理'],
          axisTick: {
            interval: 1
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [67, 58, 41, 15],
          type: 'line'
        }]
      },
      data2: {
        grid: {
          left: '20px',
          right: '0',
          bottom: '20px',
          top: '20px'
        },
        xAxis: {
          type: 'category',
          data: ['总问题', '已转办', '已处理', '待处理'],
          axisTick: {
            interval: 1
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [67, 58, 41, 15],
          type: 'bar'
        }]
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.w = this.$refs.w.$el.offsetWidth - 32
    }, 10)
  }
}
</script>